<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Infrastructure architectural overview &#183; GFN InSight documentation</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
    <style type="text/css">
      /* Override some defaults */
      html, body {
        background-color: #eee;
      }
      body {
        padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
      }
      .container > footer p {
        text-align: center; /* center align it with the container */
      }
      .container {
        width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
      }

      /* The white background content wrapper */
      .container > .content {
        background-color: #fff;
        padding: 20px;
        margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
        -webkit-border-radius: 0 0 6px 6px;
           -moz-border-radius: 0 0 6px 6px;
                border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
                box-shadow: 0 1px 2px rgba(0,0,0,.15);
      }

      /* Page header tweaks */
      .page-header {
        background-color: #f5f5f5;
        padding: 20px 20px 10px;
        margin: -20px -20px 20px;
      }

      /* Styles you shouldn't keep as they are for displaying this base example only */
      .content .span10,
      .content .span4 {
        min-height: 500px;
      }
      /* Give a quick and non-cross-browser friendly divider */
      .content .span4 {
        margin-left: 0;
        padding-left: 19px;
        border-left: 1px solid #eee;
      }

      .topbar .btn {
        border: 0;
      }

    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body>

<div class="topbar">
      <div class="fill">
        <div class="container">
          <a class="brand" href="http://stormy-stone-6022.heroku.com">GFN InSight</a>
          <ul class="nav">
	    <li><a href="index.html">Home</a></li>
            <li><a href="datastore.html">MongoDB datastore</a></li>
            <li><a href="flashapp.html">Flash app</a></li>
            <li><a href="roradmin.html">RoR Admin</a></li>
          </ul>
        </div>
      </div>
    </div>


    <div class="container">

      <div class="content">
        <div class="page-header">
          <h1>Architectural overview <small>How the different elements of the application work together</small></h1>
        </div>
        <div class="row">
          <div class="span14">
            <h2>Overview</h2>
            From an architectural overview perspective, the ecosystem of GFN InSight looks like the following:<p/>
            <div class="center"><img src="architecture.png" /></div>
            <div class="row">
            	<div class="span10">
            		 <h3>Description</h3>
            		 The above diagram presents the architecture of GFN InSight from a very high level. Let us understand how this works, better:</p>
            		 All the of the application and services run either inside Heroku, a cloud platform for Ruby on Rails applications, or outside Heroku with an integration with Heroku.<p/>
            		 <h4 id="flash">Flash application</h4>The front-end Flash application that makes use of the data to generate visualizations is stored as a series of static Flash-builder generated files (mainly <strong>Main.swf</strong>) on the Heroku application (despite the fact that it does not interact with the application MVC elements at all).
            		 It makes HTTP service requests to the MongoDB instance directly, and manipulates the returned JSON output to perform operations on it.
            		 <h4 id="ror">RoR Admin</h4>The Ruby-on-Rails Admin is designed to establish the barebones of a simple administration interface that can communicate to the MongoDB database, and perform operations such as editing and deleting records. In future, it may be used to generate new collections, and move the entirety of arithmetic tasks 
            		 performed on MS Excel spreadsheets to this service, and completely get rid of the manual piece of using MongoDB command line tools to transport data. This RoR Admin is the primary application of the Heroku account setup, whose public facing side is the <strong>Flash application</strong>.
            		 <h4 id="mongo">MongoDB datastore</h4>The MongoDB datastore, hosted in MongoLab and used as an add-on to the Heroku, is the primary storage for all the collections of data used by any user-facing applications. It serves its output as JSON responses, based on the URL arguments, and can be used as a rudimentary web service definition for all internal applications, until
            		 the readiness of a fully-functional and elaborate web service API stack. 
            	</div>
            	 <div class="span4">
            	 	<h3>Setting up Heroku</h3>
		In order to setup the application on Heroku, the development computer needs to have <span class="label notice no-transform">Git</span> setup to be able to push the updates to the project stormy-stone-6022 on Heroku. For further instructions on how this may be done, refer to <a href="http://devcenter.heroku.com/articles/quickstart" target="_blank" >this simple guide</a>. 
            <h3>Additional notes</h3>
		In order to access this data collection store, you need to be an owner/collaborator of the project stormy-stone-6022 on Heroku. If you are not the current owner, kindly discuss this with the administrator of this application, Kyle Gracey.
          </div>
            </div>
          </div>
         
        </div>
      </div>

      <footer>
        <p>&copy; Team GFN InSight &#183; Department of Information Systems, Carnegie Mellon University</p>
      </footer>

    </div> <!-- /container -->

  </body>
</html>
